<template>
  <el-button @click="openDialog">添加数据</el-button>
  <el-table :data="tableData.slice(index, index + pagemax)" style="width: 100%">
    <!-- 这里不能改变原数组，且需要截取原数组，所以用slice。包前不包后 -->
    <!--  -->
    <el-table-column prop="alt" label="图片" width="180" />
    <el-table-column prop="img" label="文案" width="180">
      <template #default="scope"
        ><el-image style="width: 100px; height: 100px" :src="scope.row.img"
      /></template>
    </el-table-column>
    <el-table-column prop="link" label="跳转地址" />
    <el-table-column prop="link" label="上线">
      <template #default="scope">
        <el-switch
          v-model="scope.row.flag"
          class="ml-2"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          @change="(flag) => onChange(scope.row.bannerid, flag)"
        />
      </template>
    </el-table-column>
    <el-table-column prop="link" label="操作">
      <template #default="scope">
        <el-icon
          @click="deletelist1(scope.row.bannerid)"
          style="cursor: pointer"
        >
          <Delete />
        </el-icon>
      </template>
    </el-table-column>
    <!-- 这样数据就展示出来了 -->
  </el-table>

  <!-- 分页开始。看看难不难 -->
  <el-pagination
    background
    layout="prev, pager, next"
    :total="tableData.length"
    :page-size="pagemax"
    @current-change="currentChange"
  />

  <!-- 分页结束 -->
  <!-- 对话框开始 -->
  <el-dialog title="添加轮播图" width="30%"  v-model="dialogVisible" >
    <BannerFrom1></BannerFrom1>
  </el-dialog>
  <!-- 对话框结束 -->
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { getBannerList1, updateFlag1, delete1 } from "../services/index.js";
import BannerFrom1 from '../components/BannerForm1.vue'
// 这个表示的是控制开关的
// 每页的条数的参数
const index = ref(0);
const pagemax = ref(2);
let tableData = ref([]);
const dialogVisible=ref(false)
const currentChange = function (page) {
  index.value = (page - 1) * pagemax.value;
  // 这里一般看规律的话，直接先把现象列出来，然后再实现。这样最好
  // 比如说    第一页显示  1    下标为  0和1
  //          第二页显示   2     下标为2和三
  // console.log(page);
  // 要以这种方式写函数才可以，其他的方式不行。这点需要切记
};
// fetchBannerList1()
getBannerList1().then((req) => {
  // console.log(req);
  tableData.value = req.data.data;
  // console.log(req.data.data);
});
const onChange = function (bannerid, flag) {
  updateFlag1({
    bannerid,
    flag,
  });
};
const deletelist1 = function (bannerid) {
  // 关于get请求的写法，在写发送ajax请求的时候，如果需要携带参数的话，那么就需要传入一个参数，这个参数的由来
  // 可能是又页面拿过来的参数，也有可能是其他的接口拿过来的参数，这个需要判断，如果是在表格中。在表格里边插入非文字
  // 的内容。就需要通过插槽scope来获取。其他的倒是另说。传入参数的话无论是get和post里边，只需要传入参数就好了。
  // 这里的参数是从点击事件里边传入的。然后调用这个事件。就传入进去了。这点需要特别注意。
  // 很重要。
  // 不需要其他的参数。
  // 关于使用elm组件，可以先阅读文档开头的文字接受，然后在复制下来。测试里边的功能
  delete1(bannerid).then(() => {
    fetchBannerList1();
  });

  // 删除之后需要重新刷新数据
};
// 把这个获取数据的函数拿出来
const fetchBannerList1 = function () {
  getBannerList1().then((req) => {
    // console.log(req);
    tableData.value = req.data.data;
    // console.log(req.data.data);
  });
};
// 下边是对话框相关的内容
const openDialog=()=>{
  dialogVisible.value=true

}
// 这里生命周期就一个onmounted感觉写在这里
</script>
<!-- <script>
import { getBannerList1 } from "../services/index";
export default {
  data() {
    return {
      tableData: []
    //   表示的是定义的是一个数组。然后再传进来一个数组。是这个意思，不要搞错了
    };
  },
 async created(){
   let req = await getBannerList1()
   this.tableData=req.data.data
  }
};
// 然后发送ajax的请求。替换里边的数据.原来返回数据是在网。通过引入的函数方法，不需要通过this就可以直接调用。
// 一般如果不是在需要更新页面，直接在created里边写就好了
// 络里边查看。我曹，真的难受啊..然后获取数据的是要打印出来看的这点很重要
</script> -->
